<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { parseTime } from "../../../utils";
import LoginRecordApi from '../api/loginRecord'

const router = useRouter();
const onClickLeft = () => history.back();

// 新增表单数据
const formState = ref({
  title: '',
  createBy: '',
  tel: '',
  date: '2022-01-01'
})
// 显示日期选择组件
const showCreateTimeDateTimePicker = ref(false);
const onCreateTimeDateTimeConfirm = (value) => {
  formState.value.createTime = parseTime(value);
  showCreateTimeDateTimePicker.value = false;
};
const showDeleteTimeDateTimePicker = ref(false);
const onDeleteTimeDateTimeConfirm = (value) => {
  formState.value.deleteTime = parseTime(value);
  showDeleteTimeDateTimePicker.value = false;
};
// 表单提交
const onSubmit = (values) => {
  console.log('submit', values)
  handleAdd()
}
const onFailed = (errorInfo) => {
  Toast.fail('提交失败')
  console.log('failed', errorInfo);
};

// 新增
const handleAdd = () => {
  return new Promise((resolve, reject) => {
    const param = Object.assign({}, formState.value)
    LoginRecordApi.add(param)
      .then((response) => {
        const data = response.data
        if (data.code === 200) {
          Toast.success('提交成功！')
          router.push('/loginRecord/list')
        } else {
          Toast.fail(data.message);
          reject();
        }
      })
      .catch((error) => {
        if (error.message !== "") {
          Toast.fail(error.message);
        }
        reject(error);
      });
  });
}
</script>

<template>
  <div>
    <van-nav-bar title="新增" left-text="返回" left-arrow @click-left="onClickLeft">

    </van-nav-bar>
    <van-form @submit="onSubmit" @failed="onFailed">
      <van-cell-group inset>
        <van-field v-model="formState.id" label="ID"
                   name="title" placeholder="请输入ID"
                   :rules="[{ required: true, message: '请输入ID' }]" />
        <van-field v-model="formState.createUser" label="记录创建者用户名"
                   name="title" placeholder="请输入记录创建者用户名"
                   :rules="[{ required: true, message: '请输入记录创建者用户名' }]" />
        <van-field v-model="formState.createUserRealName" label="登录用户真实名称"
                   name="title" placeholder="请输入登录用户真实名称"
                   :rules="[{ required: true, message: '请输入登录用户真实名称' }]" />
        <van-field v-model="formState.createTime" is-link readonly name="dateTimePicker"
                   label="记录创建时间" placeholder="点击选择日期时间"
                   @click="showCreateTimeDateTimePicker = true" />
        <van-field v-model="formState.deleteTime" is-link readonly name="dateTimePicker"
                   label="记录删除时间" placeholder="点击选择日期时间"
                   @click="showDeleteTimeDateTimePicker = true" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

    <van-popup v-model:show="showCreateTimeDateTimePicker" position="bottom">
      <van-datetime-picker type="datetime" @confirm="onCreateTimeDateTimeConfirm" @cancel="showCreateTimeDateTimePicker = false" />
    </van-popup>
    <van-popup v-model:show="showDeleteTimeDateTimePicker" position="bottom">
      <van-datetime-picker type="datetime" @confirm="onDeleteTimeDateTimeConfirm" @cancel="showDeleteTimeDateTimePicker = false" />
    </van-popup>
  </div>
</template>